<template>
    <div class="bg">
        <div class="normal_padding">
          <div class="newtitle"> {{Details.title}}</div> 
        
          <p><span>时间:{{$filters.dataformat(Details.add_time)}}</span><span class="fr">浏览{{Details.click}} 次</span></p>
        </div>
          <van-divider />
        <div class="newcontent" v-html="Details.content"></div>
        <van-cell-group inset>
  <van-field
    v-model="message"
    rows="2"
    autosize
    type="textarea"
    maxlength="50"
    placeholder="请输入留言"
    show-word-limit

  />
</van-cell-group>
<van-button     @click="sendissus" type="primary" size="large">发布评论</van-button>
<van-divider content-position="left">全部评论</van-divider>
<div class="comment" v-for=" item in userdissus" :key="item.id">
   <p> <span class="username">{{item.user_name}}</span><span class="usertime">{{$filters.dataformat(item.add_time) }}</span></p> 
    <p>{{item.content}}</p>
   <p> <span>赞</span>  <span>回复{{$route.params.id}}</span></p> 
</div>
<van-divider @click="getdissus($route.params.id,issuspage)"
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
 <span v-show="!show">{{content}}</span> 
<van-loading v-show="show" type="spinner" />
</van-divider>
<!-- <van-loading type="spinner" color="#1989fa" /> -->
    </div>
</template>

<script>
import { fetchNewsDetails }  from '@/API/goods.js'
import { fetchNewsDissus }  from '@/API/goods.js'
import { fetchpushDissus }  from '@/API/goods.js'
import { Toast }  from 'vant'

import { ref } from 'vue';
    export default {
        name:"newtail",
          props: {
            id: Number
  },
        setup(prop){
            const message = ref('');
            const Details = ref({});
            const userdissus = ref([]);
            const issuspage =ref(1)
            const show = ref(false)
            const content =ref('')
            console.log(prop.id);
            content.value="点击加载更多"
            const getdata =async (id)=>{
                console.log(id);
                var reslut =await fetchNewsDetails(id)
                Details.value =reslut.message
                return reslut.message
            }
            const getdissus =async (id,page=1)=>{
                 show.value=true
                  var reslut =await fetchNewsDissus(id,page)
                  userdissus.value =[...userdissus.value ,...reslut.message]
                  issuspage.value++
                  reslut.message.length ==0 ?   content.value="没有更多,快留下一条评论"  :    content.value="点击加载更多"
                    show.value=false
            }
         const sendissus =async ()=>{
           
             var reslut =await fetchpushDissus(prop.id,{content:message.value})
               Toast.success('发布成功');
               userdissus.value.unshift({ id: 9047,user_name: '陈全', add_time: '', content:message})
            }
        getdata(prop.id)
        getdissus(prop.id,issuspage.value)
            return {
                getdata,
                Details,
                message,
                userdissus,
                getdissus,
                issuspage,
                sendissus,
                content
            
            }
        }
    }
</script>

<style lang="scss" scoped>
.bg{
    background-color: #f7f8fa;
}
.normal_padding{
   padding:0 0.45rem;
   
    .newtitle{
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
    padding: 0.5rem 0 0;
    color: #222222;
    font-weight: 700;
    font-family: "PingFang SC",Helvetica,Arial,"微软雅黑","黑体";
    }
    p{
        margin-top: 0.4rem;
        margin-bottom: 0.2rem;
        font-size: .6rem;
        .fr{
            float: right;
        }
    }



    
}
.newcontent{
     padding:0 0.45rem;
    line-height: 1.1rem;
    font-size: 0.7rem;
    margin-top: 0.25rem;
    letter-spacing: .002rem;
   ::v-deep  p img{
             width: 100%;
         }
}
      
.comment{
   font-size: 0.7rem;
      padding:0 0.45rem;
      border-bottom: 1px solid #f0f0f0;
      .username{
    font-weight: 600;
    color: #379be9;
    margin-right: 2rem;
      }
      .usertime{
          font-size: 0.6rem;
          color: #666;
      }
      p{
          word-wrap:break-word;
          overflow: hidden;
      }
}
</style>